<template>
  <h2>当前求和为{{ sum }}</h2>
  <button @click="sum++">+1</button>
  <h2>msg:{{ msg }}</h2>
  <button @click="msg=msg+'!'">msg改变</button>
</template>
  
  <script>
import { reactive, computed, ref, watch } from "vue";
export default {
  name: "App",
  components: {},
  // vue2
  // watch: {
  //   //  简单写法
  //   sum(newValue, oldValue) {
  //     console.log(newValue, oldValue);
  //   },
  //   // 完整写法
  //   sum: {
  //     immediate: true,
  //     deep: true,
  //     handler(newValue, oldValue) {
  //       console.log(newValue, oldValue);
  //     },
  //   },
  // },
  setup(props, context) {
    let sum = ref(0);
    let msg = ref('你好');
  //  1,监听 ref 
  watch(sum,(newValue, oldValue) => {
        console.log(newValue, oldValue);

  })
  // 2,监视多个监听 ref
  watch([sum,msg],(newValue, oldValue) => {
        console.log(newValue, oldValue);
  },{
    immediate:true,
    deep:true
  })
    return { sum ,msg};
  },
};
</script>
  
  <style>
</style>
  